import React, { Component } from 'react';

import { connect } from 'dva';

import moment from 'moment';

import MyComponent from '@/components/MyComponent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Geetest from '@/components/Geetest';

import { systems as tabList } from '@/commons/tabList';

import Test from './Test';
import Base from './Base';

@connect(({ systems, loading }) => ({
  systems,
  loading: loading.models.systems,
}))
export default class extends MyComponent {
  componentDidMount() {
    const { dispatch } = this.props;

    // dispatch({
    //   type: 'systems/fetch',
    // });

    // const _this = this

    // dispatch({
    //   type: 'systems/fetchGeetest',
    //   callback(data) {

    //     const results = data.data;

    //     _this.setState(state => ({
    //       ...state,
    //       ...results,
    //     }))
    //   }
    // });
  }

  handleTabChange = type => {
    const { dispatch } = this.props;

    // dispatch({
    //   type: 'systems/fetch',
    //   payload: { type },
    // });
  }

  render() {
    const { systems = {} } = this.props;
    const { type } = systems;

    const config = {
      ...this.state
    }

    console.log(this.state, 'state')

    return (
      <PageHeaderWrapper 
        title="系统设置" 
        action={moment().format('LLLL')}
        tabActiveKey={String(type)}
        tabList={tabList}
        onTabChange={this.handleTabChange}
      >
        {/*<Geetest {...config} />*/}

        {/*https://juejin.im/post/5c18995c51882569b02433ab*/}

        {
          type === 'base'
          ?
          <Base />
          :
          type === 'test'
          ?
          <Test />
          :
          null  
        }
      </PageHeaderWrapper>
    )
  }
}